<template>
	<!-- <view :class="goodsDataList.length == 0 ? 'pagesbg' : 'pages'"> -->
	<view class="pagesbg" :class="
	(checkActive == 0 && goodsDataList.length == 0) ||(checkActive == 1 && businessList.length == 0)
	 ? 'pagesWhite' : ''">
		<!-- 头部 -->
		<view class="header_bar header_fixed" :class="{'header_main' : goodsDataList.length == 0}">
			<view class="header" :class="{'header_bg' : heightTop > 10}">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="searchBox" :class="{'searchBox--val' : goodsDataList.length != 0}">
					<view class="searchBox-item searchBox-item--greyBg">
						<image src="@/static/index/indexSearch.png" mode="" @tap.stop="search()"></image>
						<input type="text" :focus="true" :placeholder="'请输入要搜索的'+(checkActive == 0 ? '商品' : '店铺')+'名称'" placeholder-class="inputStyle" v-model="searchValue"
						@confirm="search()">
					</view>
				</view>
			</view> 
		</view> 
		<!-- 主体 -->
		<view class="type">
			<view class="history" v-if="historyList.length != 0 && (goodsDataList.length == 0 && businessList.length == 0)">
				<view class="history-wrapper">
					<view class="history-header">
						<view class="history-title">历史搜索</view>
						<image class="history-delete" src="@/static/public/delete.png" mode=""
						@tap.stop="del()"></image>
					</view>
					<view class="history-list">
						<view class="history-list__item"  v-for="(item,index) in historyList" :key="index" 
						@tap.stop="searchValue = item;search()">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goodsBox">
				
				<!-- 商品 -->
				<view class="" v-if="(checkActive == 0)">
					<view class="goods-wrapper" v-if="goodsDataList.length > 0">
						<goodsList :goodsDataList="goodsDataList"></goodsList>
					</view>
					<view class="initNoData" v-if="goodsDataList.length == 0"></view>
				</view>
				
				<!-- <view class="history-noData" v-if="(typeActive == 0 && goodsDataList.length == 0) ||
				 (typeActive == 1 && businessList.length == 0) && searchClick == true">
					<image class="icon" src="@/static/public/icon-nodata-image.png" mode=""></image>
				</view> -->
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				type: 0,
				goodsDataList: [
					// {id: 1,storeName: '表现金美孚SP级0W-40全合成机油发动机润表现金美孚SP级0W-40全合成机油发动机润',price: '899.7'},
					// {id: 1,storeName: '表现金美孚SP级0W-40全合成机油发动机润表现金美孚SP级0W-40全合成机油发动机润',price: '899.7'},
					// {id: 1,storeName: '表现金美孚SP级0W-40全合成机油发动机润表现金美孚SP级0W-40全合成机油发动机润',price: '899.7'},
				],
				qiniu: {},
				typeList:[
					// {name: '数码',},{name: '健康用品',},{name: '家电',},{name: '症状调理',},{name: '美妆护理',},
				],
				show: true,
				isShowModal: false,
				historyList: [],
				searchValue: '',
				pages: 1,
				pageIndex: 1,
				pageSize: 10,
				searchClick: false,
				lsShow: true,
				isShowPage: false,
				hotList: [
					"口红唇釉","TF眼影盘","阿玛尼","防晒衣","鞋子","宝宝手镯",
				],
				goodsTypeList: [
					{name: '全部'},{name: '产品'},{name: '店铺'},
				],
				typeActive: 0,
				heightTop: 0,
				businessList: [],
				checkTxt: '商品',
				checkActive: 0,
				typeBox: [
					{name: '商品'},{name: '店铺'},
				],
				checkFlag: false,
			}
		},
		onPageScroll(e) {
			this.heightTop = e.scrollTop;
		},	
		onLoad(options) {
			if(options.value1){
				this.checkActive = options.value1;
				this.checkTxt = this.typeBox[this.checkActive].name;
			}
		},
		onUnload() {  
			// 移除监听事件  
			uni.$off('add');  
		},
		onShow() {
			this.searchValue = '';
			if(uni.getStorageSync('historyList')){
				this.historyList = uni.getStorageSync('historyList') || [];
			}
			// this.init();
			this.isShowPage = true;
		},
		onReachBottom() {
			if (this.pageIndex >= this.pages) {
				// return this.$tools.toast('到底了');
			} else {
				this.pageIndex++;
				console.log("+++")
				if(this.checkActive == 0){
					this.getGoodsList();
				}else{
					this.getSelfList();
				}
			}
		}, 
		methods: {
			init(){
				this.isShowPage = false;
				this.goodsDataList = [];
				this.getSearch();
			},
			getCheckActive(item,index){
				if(this.checkActive != index){
					this.checkTxt = item.name;
					this.checkActive = index;
					this.checkFlag = false;
					if(this.searchValue != ''){
						if(this.checkActive == 0){
							this.goodsDataList = [];
							this.getGoodsList();
						}else{
							this.businessList = [];
							this.getSelfList();
						}
					}
				}
			},
			// 搜索
			search(){
				// if(!this.searchValue){
				// 	return this.$tools.toast("请输入要搜索的商品名称");
				// }
				console.log('',this.historyList.indexOf(this.searchValue))
				if(this.historyList.indexOf(this.searchValue) == -1){
					this.historyList.unshift(this.searchValue);
					uni.setStorageSync('historyList', this.historyList);
				}
				this.searchClick = true;
				this.isShowPage = false;
				this.goodsDataList = [];
				this.getSearch();
			},
			// 搜索主页商品及店铺
			getSearch() {
				if(this.checkActive == 0){
					this.goodsDataList = [];
					this.getGoodsList();
				}else{
					this.businessList = [];
					this.getSelfList();
				}
			},
			getGoodsList() {
				var data = {};
				data['pageIndex'] = this.pageIndex;
				data['pageSize'] = this.pageSize;
				data['name'] = this.searchValue;
				this.$Ajax('/api/product/discountList',data,res => {
						if (res.code == 200) {
							this.pages = res.data.pages;
							this.goodsDataList = this.goodsDataList.concat(res.data.list);
							this.isShowPage = true;
						}
					}, err =>{
					}, 'GET'
				)
			},
			// 商家
			getSelfList() {
				var data = {};
				data['pageIndex'] = this.pageIndex;
				data['pageSize'] = this.pageSize;
				data['name'] = this.searchValue;
				this.$Ajax('/api/product/selfList',data,res => {
						if (res.code == 200) {
							this.pages = res.data.pages;
							this.businessList = this.businessList.concat(res.data.list);
							this.isShowPage = true;
						}
					}, err =>{
					}, 'GET'
				)
			},
			// 联系
			call(phone){
				console.log(phone);
				uni.makePhoneCall({
					phoneNumber: phone 
				});
			},
			// 删除历史记录
			del(){
				this.searchValue = '';
				uni.removeStorageSync('historyList');
				this.historyList = uni.getStorageSync('historyList') || [];
				console.log("historyList",this.historyList);
				this.$tools.toast('删除成功');
			},
			checkTypeActive(index){
				if(this.typeActive != index){
					this.typeActive = index;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.initNoData{
		background: #FFFFFF !important;
	}
	// .type{
	// 	background: #fff;
	// }
	.header{
		height: 115rpx;
		&_bg{
			background: #F5F5F5;
		}
	}
	.header-goBack{
		top: 20rpx;
	}
	
	.history{
		&-wrapper{
			padding: 34rpx 28rpx;
		}
		&-header{
			@include flexBetween;
			margin: 30rpx 0 42rpx;
		}
		&-title{
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		&-delete{
			width: 30rpx;
			height: 30rpx;
		}
		&-noData{
			@include flexCenterColumn;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			.icon{
				width: 360rpx;
				height: 360rpx;
			}
			.title{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #687383;
			}
			.btn{
				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				background: $globalColor-style;
				padding: 13rpx 42rpx 15rpx;
				border-radius: 50rpx;
				margin: 16rpx auto 18rpx;
			}
			font-size: 22rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			text-align: center;
			margin: 20rpx auto;
		}
		&-list{
			@include flexLeft;
			flex-wrap: wrap;
			&__item{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #131414;
				padding: 20rpx 30rpx;
				background: #FFFFFF;
				border-radius: 50rpx;
				margin: 0rpx 30rpx 20rpx 0;
			}
		}
	}
	
	.searchBox{
		width: 85%;
		position: absolute;
		right: 24rpx;
		margin: 0;
		&-item{
			padding: 8rpx 0 8rpx 30rpx;
			input{
				width: 60%;
			}
		}
		&-btn{
			padding: 15rpx 32rpx;
		}
		&--val{
			.searchBox-item--greyBg{
				background: #FFFFFF !important;
				border: 1px solid #FA6A45;
			}
		}
	}
	
	.goodsBox{
		padding-top: 40rpx;
		/* #ifdef APP-PLUS */
		padding-top: 25rpx;
		/* #endif */
	}
	
	.goodsType{
		&-list{
			@include flexLeft;
			padding: 8rpx 40rpx 30rpx;
			&__item{
				margin: 0 96rpx 0 0;
				.type{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
					white-space: nowrap;
					text-align: center;
					margin: auto;
					&--active{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1989F8;
					}
				}
			}
		}
	}
	
</style>